<template>
  <div>
    <Form :model="bdSearchForm" inline :label-width="60" class="search-form">
      <Form-item
        label="手机号码"
        prop="mobile"
        style="width: 210px; display: inline"
      >
        <Input
          type="text"
          v-model="bdSearchForm.mobile"
          placeholder="请输入手机号"
          clearable
          style="width: 150px"
        />
      </Form-item>
      <Form-item label="姓名" prop="name" style="width: 210px; display: inline">
        <Input
          type="text"
          v-model="bdSearchForm.nickName"
          placeholder="请输入姓名"
          clearable
          style="width: 150px"
        />
      </Form-item>
      <Form-item
        label="店铺名称"
        prop="name"
        style="width: 210px; display: inline"
      >
        <Input
          type="text"
          v-model="bdSearchForm.storeName"
          placeholder="请输入店铺名称"
          clearable
          style="width: 150px"
        />
      </Form-item>
      <Form-item
        label="会员类型"
        prop="name"
        style="width: 210px; display: inline"
      >
        <Select
          v-model="bdSearchForm.level"
          style="width: 150px"
          clearable
          placeholder="请选择会员类型"
        >
          <Option value="金卡会员">金卡</Option>
          <Option value="银卡会员">银卡</Option>
          <Option value="普卡会员">普卡</Option>
        </Select>
      </Form-item>
      <Form-item label="区域" prop="name">
        <regionArea
          style="display: flex"
          @selected="selectedRegions"
          :showIs="true"
        />
      </Form-item>
      <Button
        @click="bdhandleSearch"
        class="search-btn"
        type="primary"
        icon="ios-search"
        >搜索</Button
      >
    </Form>
    <Table
      height="200"
      @on-selection-change="bdHandleTable"
      border
      :columns="bdcolumns"
      :data="data1"
      :loading="loading"
    ></Table>
    <!-- <Page
          :current="bdSearchForm.pageNumber"
          :total="orderTotal"
          :page-size="bdSearchForm.pageSize"
          @on-change="orderChangePage"
          @on-page-size-change="orderChangePageSize"
          :page-size-opts="[10, 20, 50, 100]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page> -->
  </div>
</template>

<script>
import regionArea from "@/views/agent-manage/region";
import { getTable } from "@/api/sms.js";
export default {
  components: { regionArea },
  data() {
    return {
      bdSearchForm: {
        pageNumber: 1,
        pageSize: 9999999,
        mobile: "",
        nickName: "",
        storeName: "",
        roleType: "STORE",
        regionId: "",
      },
      loading: true,
      total: 0,
      bdcolumns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "姓名",
          key: "nickName",
        },
        {
          title: "店铺名称",
          key: "storeName",
        },
        {
          title: "类型",
          key: "gradeName",
        },
        {
          title: "电话",
          key: "mobile",
        },
        {
          title: "地区",
          key: "locationName",
        },
      ],
      data1: [],
    };
  },
  methods: {
    // 初始化表格
    async initTableList() {
      this.loading = true;
      if (this.bdSearchForm.regionId) {
        this.bdSearchForm.regionId = this.bdSearchForm.regionId.toString();
      }
      const res = await getTable(this.bdSearchForm);
      if (res.code != 200) return;
      this.loading = false;
      this.data1 = res.result.records;
    },
    // 搜索
    bdhandleSearch() {
      this.initTableList();
    },
    selectedRegions(v) {
      this.bdSearchForm.regionId = v[0];
    },
    // 勾选
    bdHandleTable(v) {
      this.total = v.length;
      this.$emit("changeNum", this.total);
      this.$emit("list", v);
    },

  },
  mounted() {
    this.initTableList();
  },
};
</script>

<style lang="scss" scoped>
/deep/.ivu-page {
  float: right;
  margin-top: 10px;
}
/deep/.ivu-page-options-sizer {
  width: 100px;
}
/deep/.ivu-select {
  width: 100px;
}
</style>